<template>
  <div class="pet_box">
    <el-breadcrumb separator="-->">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>宠物详情</el-breadcrumb-item>
      <el-breadcrumb-item>{{ petInfo.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-image :src="petInfo.url" class="box-card"></el-image>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="color: #606266">宠物信息</span>
      </div>
      <div class="text item">
        <p class="p_id">No: {{ petInfo.No }}</p>
        <p class="p_name">宠物名: {{ petInfo.name }}</p>
        <p>
          状态:
          <el-tag :type="(petInfo.pStatus = 1 ? 'success' : 'error')">{{
            (petInfo.pStatus = 1 ? '在售中' : '已售出')
          }}</el-tag>
        </p>
        <p>性别: {{ petInfo.sex }}</p>
        <p>生日: {{ petInfo.birthday.substr(0, 10) }}</p>
        <p>毛色: {{ petInfo.breed }}</p>
        <p>血统: {{ petInfo.blood }}</p>
        <p>
          价格: <span class="s_price">{{ petInfo.price }}</span
          >元
          <el-button icon="el-icon-goods" @click="toPay(petInfo)">立即下单</el-button>
        </p>
      </div>
    </el-card>
    <el-card class="p_tezheng">
      <p style="font-size: 26px">特征 <i style="color: #eee; font-size: 16px; margin-left: 10px">Features</i></p>
      <p>{{ petInfo.features }}</p>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DetailView',
  data() {
    return {
      petUrl: '',
      petInfo: {},
    }
  },
  created() {
    this.petUrl = this.$store.state.petData.url
    this.petInfo = { ...this.$store.state.petData }
    // console.log(this.petInfo)
  },
  methods: {
    toPay(data) {
      // console.log(this.$route)
      const fullPath = this.$route.fullPath
      // console.log('No', No)
      const uid = this.$store.state.user.uid
      const token = sessionStorage.getItem('token')
      console.log(uid)
      console.log(token)
      if (uid && token) {
        this.$router.push({
          name: 'pay',
          params: {
            No: data.No,
            // url: data.url,
            // name: data.name,
            // price: data.price,
            // number: 1,
          },
        })
      } else {
        this.$message.info('请登陆！')
        this.$router.push({
          name: 'login',
          query: {
            redirect: fullPath,
          },
        })
      }
    },
  },
}
</script>

<style scoped>
.pet_box {
  width: 800px;
  height: 700px;
  margin: 30px auto;
  /* background: #e6a23c; */
}
.p_tezheng {
  width: 720px;
  height: 200px;
  background: #ebd9b9;
  border-radius: 20px;
  border: 1px solid #cdaa86;
  margin: 0 auto;
}
.el-tag {
  margin-left: 10px;
}
.el-breadcrumb {
  margin: 20px 30px;
}
/*  */
.el-image {
  width: 400px;
  height: 495px;
  border-radius: 20px;
}
p {
  font-family: 'Helvetica Neue';
  color: rgb(152, 103, 61);
  padding: 10px;
}
.box-card {
  margin-left: 30px;
  width: 350px;
  float: left;
  border-radius: 20px;
}
span {
  color: #e6a23c;
}
.el-button {
  margin-left: 30px;
  color: #fff;
  background: #67b79c;
}
.p_id {
  font-size: 29px;
  color: rgb(134, 199, 224);
}
.p_name {
  font-size: 25px;
  color: rgb(231, 220, 194);
}
.s_price {
  font-size: 25px;
  color: #f56c6c;
}
</style>
